<template>
  <div>
      <b-form @submit.prevent="onSubmit" @reset.prevent="onCancel">
        <b-form-group label="登录名:" label-for="name">
          <b-form-input
            placeholder="登录名"
            v-model="form.name"
          ></b-form-input>
        </b-form-group>
        <b-form-group label="密码:" label-for="password">
          <b-form-input
            placeholder="密码"
            type="password"
            v-model="form.password"
          ></b-form-input>
        </b-form-group>
        <button class="btn btn-primary float-right ml-2" type="submit">
          登录
        </button>
        <button class="btn btn-secondary float-right" type="reset">清空</button>
      </b-form>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { createActionCable } from '../actionCable'
import { setHeader } from '../helpers/axios'

// import { de } from 'date-fns/locale'
export default {
  name: 'Login',
  components: {
  },
  computed: {
    ...mapGetters({
      token: 'account/getToken',
      user: 'account/getUser'
    }),
    hideReplyBox () {
      const { allowMessagesAfterResolved } = window.chatwootWebChannel
      const { status } = this.conversationAttributes
      return !allowMessagesAfterResolved && status === 'resolved'
    },
    showCreateConversation () {
      return !this.messageCount
    }
  },
  data () {
    return {
      form: {
        name: 'agent-1',
        password: 'agent-1@yichat.com'
      }
    }
  },
  methods: {
    ...mapActions('account', [
      'getUser',
      'login',
      'getProfile'
    ]),
    async onSubmit (evt) {
      const accountId = 'd062bd4e-2646-7b63-a740-3a08abcc6608'
      await this.login({
        name: this.form.name,
        password: this.form.password,
        accountId
      })

      setHeader(this.token)
      await this.getProfile()

      if (this.token) {
        window.WOOT.actionCable = createActionCable(
          window.WOOT,
          accountId,
          this.user.id,
          this.token
        )

        this.$router.replace('chat')
      }
    },
    onCancel (evt) {
      this.form.name = ''
      this.form.password = ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.chat-message--input{
  box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #c7e3ff;
  align-items: center;
  display: flex;
  padding: 0 .5rem 0 .75rem;
  border-radius: 7px;
}
.bg-white {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
}
.form-input, textarea.form-input.large, textarea.form-input.small {
    height: auto;
}
textarea.form-input {
    font-family: Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Tahoma,Arial,sans-serif;
}
.form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: .1875px;
    box-sizing: border-box;
    color: #3c4858;
    display: block;
    font-family: Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Tahoma,Arial,sans-serif;
    font-size: 1rem;
    height: 2.5rem;
    line-height: 1.5;
    max-width: 100%;
    outline: none;
    padding: .25rem;
    position: relative;
    transition: background .2s,border .2s,box-shadow .2s,color .2s;
    width: 100%;
}
.text-black-900 {
    --text-opacity: 1;
    color: #1b1c1f;
    color: rgba(27,28,31,var(--text-opacity));
}
textarea {
    overflow: auto;
}
.button-wrap{
    display: flex;
    align-items: center;
    padding-left: .5rem;
}
.icon-button {
    min-height: 2rem;
    min-width: 2rem;
}
.ml-1 {
    margin-left: .25rem;
}
.justify-center {
    justify-content: center;
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.relative {
    position: relative;
}
.rounded-lg {
    border-radius: .5rem;
}
.mb-1 {
    margin-bottom: .25rem;
}
.z-50 {
    z-index: 50;
}
.bg-white {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
}
.mt-50{
  margin-top: 50;
}
.w-full {
    width: 100%;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.rounded {
    border-radius: 0.25rem;
}
/* button {
    background-color: transparent;
    background-image: none;
}
*, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
} */
.message{
  border: 1px #42b983 solid;
  margin-bottom: 5px;
  width: 100%;
}
</style>
